
<div style="POSITION: relative" id="content">
  <h3>easyUI 加载parent/child节点到tree 转换tree标准格式数据 </h3>
  <div id="article_content" class="article_content">
    <p>通常的方式代表一个树节点就是存储一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">parentid 在每一个节点,这个也被称为邻表模型,直接加载这些数据到tree是不允许的,但是我们可以转换它到标准tree数据&#26684;式在tree加载之前.tree插件提供一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">'loadFilter'
      选项函数它可以做到这个功能.提供一个机会去改变一个任何的进入数据,这个教程向你展示如何使用<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&nbsp;'loadFilter'函数加载&nbsp;<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">parent/child节点到tree.</span></span></span></span></p>
    <p><img src="documentation/images/1344849497_5046.png" alt=""><br>
    </p>

<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> &nbsp;parent/child 节点原始数据(这个不是标准的tree数据&#26684;式)</h4>
    <pre name="code" class="javascript">[  
{&quot;id&quot;:1,&quot;parendId&quot;:0,&quot;name&quot;:&quot;Foods&quot;},  
{&quot;id&quot;:2,&quot;parentId&quot;:1,&quot;name&quot;:&quot;Fruits&quot;},  
{&quot;id&quot;:3,&quot;parentId&quot;:1,&quot;name&quot;:&quot;Vegetables&quot;},  
{&quot;id&quot;:4,&quot;parentId&quot;:2,&quot;name&quot;:&quot;apple&quot;},  
{&quot;id&quot;:5,&quot;parentId&quot;:2,&quot;name&quot;:&quot;orange&quot;},  
{&quot;id&quot;:6,&quot;parentId&quot;:3,&quot;name&quot;:&quot;tomato&quot;},  
{&quot;id&quot;:7,&quot;parentId&quot;:3,&quot;name&quot;:&quot;carrot&quot;},  
{&quot;id&quot;:8,&quot;parentId&quot;:3,&quot;name&quot;:&quot;cabbage&quot;},  
{&quot;id&quot;:9,&quot;parentId&quot;:3,&quot;name&quot;:&quot;potato&quot;},  
{&quot;id&quot;:10,&quot;parentId&quot;:3,&quot;name&quot;:&quot;lettuce&quot;}  
]  </pre>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建 Tree 使用 'loadFilter'</h4>
    <p></p>
    <p>
    <pre name="code" class="javascript">$('#tt').tree({  
    url: 'data/tree6_data.json',  
    loadFilter: function(rows){  
        return convert(rows);  
    }  
}); </pre>
    </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 转换的实现</h4>
    <pre name="code" class="javascript">function convert(rows){  
    function exists(rows, parentId){  
        for(var i=0; i&lt;rows.length; i++){  
            if (rows[i].id == parentId) return true;  
        }  
        return false;  
    }  
      
    var nodes = [];  
    // 得到顶层节点
    for(var i=0; i&lt;rows.length; i++){  
        var row = rows[i];  
        if (!exists(rows, row.parentId)){  
            nodes.push({  
                id:row.id,  
                text:row.name  
            });  
        }  
    }  
      
    var toDo = [];  
    for(var i=0; i&lt;nodes.length; i++){  
        toDo.push(nodes[i]);  
    }  
    while(toDo.length){  
        var node = toDo.shift();    // 父节点 
        // 得到子节点 
        for(var i=0; i&lt;rows.length; i++){  
            var row = rows[i];  
            if (row.parentId == node.id){  
                var child = {id:row.id,text:row.name};  
                if (node.children){  
                    node.children.push(child);  
                } else {  
                    node.children = [child];  
                }  
                toDo.push(child);  
            }  
        }  
    }  
    return nodes;  
}  </pre>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 &nbsp;EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/tree/download/easyui-tree6-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-tree-demo.zip</a></div>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>